import React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { CardStyleInterpolators, createStackNavigator, HeaderStyleInterpolators } from '@react-navigation/stack'
import Home from '@/pages/Home'
import Detail from '@/pages/Detail'
import { Button, Platform } from 'react-native'
/**
 * { Navigator, Screen }
 */
let Stack = createStackNavigator()

export default class Navigator extends React.Component {
    render() {
        return (
            <NavigationContainer>
                <Stack.Navigator 
                    headerMode= "float"
                    screenOptions={{
                        headerTitleAlign: 'center',
                        headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
                        CardStyleInterpolators: CardStyleInterpolators.forFadeFromBottomAndroid,
                        gestureEnabled: true,
                        headerStyle: {
                            ...Platform.select({
                                android: {
                                    elevation: 0,
                                    borderBottomWidth: 0
                                },
                                ios: {

                                }
                            })
                        }
                    }}
                >
                    <Stack.Screen 
                        options={{ 
                            headerTitle: "首页",
                            headerLeft: () => (
                                <Button 
                                    title="left"
                                ></Button>
                            ),
                            headerRight: () => (
                                <Button 
                                    title="right"
                                ></Button>
                            )
                        }}
                        name="Home"
                        component={ Home } />
                    <Stack.Screen 
                        options={{ 
                            headerTitle: "详情"
                        }} 
                        name="Detail"
                        component={ Detail } />
                </Stack.Navigator>
            </NavigationContainer>
        )
    }
}
